import React, { useState } from 'react';
import { BrowserRouter as Router, Link } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import { menuItems, useRouteHelpers, AppRoutes } from '@/router';
import './App.css';

const { Header, Content, Sider } = Layout;

function AppContent() {
  const { getSelectedKeys, getDefaultOpenKeys } = useRouteHelpers();
  const [collapsed, setCollapsed] = useState(false);

  return (
    <Layout style={{ minHeight: '100vh', maxHeight: '100vh', overflow: 'hidden' }}>
      <Header style={{ 
        background: '#001529', 
        color: '#fff', 
        padding: '0 24px',
        fontSize: '18px',
        fontWeight: 'bold',
        height: '64px',
        lineHeight: '64px'
      }}>
        Three.js 学习教程
      </Header>
      <Layout style={{ height: 'calc(100vh - 64px)' }}>
        <Sider 
          width={250} 
          style={{ background: '#fff', height: '100%' }}
          theme="light"
          collapsible
          collapsed={collapsed}
          onCollapse={(value: boolean) => setCollapsed(value)}
        >
          <Menu
            mode="inline"
            selectedKeys={getSelectedKeys()}
            defaultOpenKeys={getDefaultOpenKeys()}
            style={{ height: '100%', borderRight: 0 }}
            inlineCollapsed={collapsed}
          >
            {menuItems.map(group => (
              <Menu.SubMenu key={group.key} icon={group.icon} title={group.label}>
                {group.children?.map(item => (
                  <Menu.Item key={item.key}>
                    <Link to={item.path}>{item.label}</Link>
                  </Menu.Item>
                ))}
              </Menu.SubMenu>
            ))}
          </Menu>
        </Sider>
        <Layout style={{ height: '100%', overflow: 'hidden' }}>
          <Content
            style={{
              background: '#fff',
              margin: 0,
              height: '100%',
              overflow: 'auto'
            }}
          >
            <AppRoutes />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
}

function App() {
  return (
    <Router>
      <AppContent />
    </Router>
  );
}

export default App;
